<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
	.btn{
		display:block;
		width:100px;
		height:100px;
		border-radius: 50%;
		background: #ff0;
		position:absolute;
		
	}
	#first{
		animation:xuanzhuan 10s infinite;
		/*
		property ： 属性 
		duration ： 持续时间 
		timing-function ： 动画类型 
		delay 延时：
		*/
		transition:all 10s;
	}
	#second{
		top:0;
		right:0;
	}
	#third{
		bottom: 0;
		left: :0;
	}
	#fourth{
		bottom: 0;
		right:0;
	}
	@keyframes xuanzhuan{
		20%{
			top:0;
			right:0;
	}
	40%{
		bottom: 0;
		right:0;
	}
	60%{
			bottom: 0;
			left:0;
	}
	80%{
		top:0;
		left:0;
	}
	99%{
		top:50%;
		left:50%;
	}
	99%{
		/*
		params:平移 旋转 缩放
		*/
		transform: translate(-50%,-50%);
	}
	</style>
</head>
<body>
	<div id="root">
	<button class="btn" id="first">1</button>
	<button class="btn" id="second">2</button>
	<button class="btn" id="third">3</button>
	<button class="btn" id="fourth">4</button>
	</div>
</body>
</html>